<!--  -->
<template>
  <div :class="isWhite ? 'theme-day' : 'theme-night'">
    <el-container style="height: 100vh">
      <el-header>
        <div style="display: flex; align-items: center">
          <span class="side-open" v-show="open">
            <i class="el-icon-d-arrow-right" @click="toggleSidebar"></i>
          </span>
          <span class="side-close" v-show="close">
            <i class="el-icon-d-arrow-left" @click="toggleSidebar"></i>
          </span>
          <span class="system-title">后台管理系统</span>
          <el-switch
            v-model="isWhite"
            active-icon-class="el-icon-sunny"
            inactive-icon-class="el-icon-moon"
            active-color="#bfb8b8"
            inactive-color="#4a4646"
            @click="ToggleColor"
            class="theme-switch"
          >
          </el-switch>
        </div>
        <div style="display: flex; align-items: flex-end">
          <el-badge :value="receivedData" class="head-msg">
            <el-button
              icon="el-icon-bell"
              class="head-news"
              circle
              @click="routerPush('TabLabel')"
            ></el-button
          ></el-badge>
          <div class="head-user">
            <el-avatar
              shape="circle"
              :size="50"
              :src="bulbasaur"
              class="head-avatr"
            ></el-avatar>
            <div style="display: flex; align-items: center">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  admin<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="margin-top: 1rem">
                  <el-dropdown-item>
                    <p @click="routerPush('PersonalCenter')">个人中心</p>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <p @click="logout">退出登录</p>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <el-container style="height: 90%">
        <el-aside width="auto">
          <!-- router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
          <el-menu
            router
            :default-active="$route.path"
            :default-openeds="opends"
            class="el-menu-vertical-demo"
            style="height: 100%"
            :collapse="isCollapse"
            active-text-color="#409EFF"
          >
            <el-menu-item index="/SysConTent/HomePage">
              <i class="el-icon-menu"></i>
              <span slot="title">系统首页</span>
            </el-menu-item>
            <el-submenu index="user">
              <template slot="title">
                <i class="el-icon-date"></i>
                <span slot="title">用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                   index="/SysConTent/UsefulForms">
                  用户列表</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/SysConTent/TabLabel">
              <i class="el-icon-document"></i>
              <span slot="title">消息通知</span>
            </el-menu-item>
            <el-submenu index="commodity">
              <template slot="title">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  index="/SysConTent/cateGory"
                  >商品分类</el-menu-item
                >
                <el-menu-item
                  index="/SysConTent/ProductList"
                  >商品列表</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="permission">
              <template slot="title"
                ><i class="el-icon-setting"></i
                ><span slot="title">权限管理</span></template
              >
              <el-menu-item-group>
                <el-menu-item
                  index="/SysConTent/PermissionList"
                >
                  <span slot="title">权限列表</span>
                </el-menu-item>
                <el-menu-item
                  index="/SysConTent/PermissionDetails"
                >
                  <span slot="title">权限详情</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/SysConTent/eChart">
              <i class="el-icon-pie-chart"></i>
              <span slot="title">数据统计</span>
            </el-menu-item>
            <el-menu-item
              index="/SysConTent/PersonalCenter"
            >
              <i class="el-icon-warning-outline"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
            <el-menu-item
              index="/SysConTent/OrderList"
            >
              <i class="el-icon-coffee"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main ref="main" :style="{ left: LeftWidth }">
          <breadCrumb />
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import breadCrumb from "./mian/breadcrumb.vue";
export default {
  components: {
    breadCrumb,
  },
  name: "SysConTent",
  data() {
    return {
      opends: ["2", "4"],
      numMessage: "",
      isCollapse: false,
      open: true,
      close: false,
      bulbasaur: require("../../assets/bulbasaur.png"),
      isWhite: true,
      LeftWidth: "208px",
      receivedData: 0,
    };
  },
  computed: {
    activeIndex() {
      const name = this.$route.name;
      // 建立 name -> index 的映射
      const map = {
        HomePage: "1",
        UsrfulForms: "2-1",
        TabLabel: "3",
        cateGory: "4-2",
        "Product-list": "4-3",
        PermissionList: "5-1",
        PermissionDetails: "5-2",
        eChart: "6",
        PersonalCenter: "7",
        "order-list": "8",
      };
      return map[name] || "1";
    },
  },
  watch: {
    receivedData: {
      handler(val) {
        this.$store.dispatch("setReceivedData", val);
      },
      // 立即监控
      immediate: true,
    },
    //监听vuex中receivedData状态的变化
    "$store.state.receivedData"(newValue, oldValue) {
      if (newValue != oldValue) {
        this.receivedData = this.$store.state.receivedData;
      }
    },
  },
  mounted() {
    // 监听滚动事件
    // window.addEventListener("scroll", this.handleScroll);
    // 2-10 的随机数
    this.receivedData = Math.floor(Math.random() * 10) + 2;
    setInterval(() => {
      this.receivedData = Math.floor(Math.random() * 10) + 2;
    }, 1000 * 60);
    this.$bus.on("determineProfile", this.handleProfileUpdate); //监听个人中心页修改头像事件
    // this.$bus.off("determineProfile")
  },
  methods: {
    handleProfileUpdate(newProfile) {
      this.bulbasaur = newProfile; // 更新头像 URL
    },
    // 侧边栏展开|折叠功能：展开时向右图标隐藏，折叠时向左图标隐藏
    toggleSidebar() {
      this.isCollapse = !this.isCollapse;
      this.open = !this.open;
      this.close = !this.close;
      if (this.isCollapse) {
        setTimeout(this.closeSidebarWidth, 160);
      } else {
        setTimeout(this.openSidebarWidth, 90);
      }
    },
    // 关闭侧边栏把main的left设置为72px
    closeSidebarWidth() {
      this.LeftWidth = "72px";
    },
    // 打开侧边栏把main的left设置为208px
    openSidebarWidth() {
      this.LeftWidth = "208px";
    },
    // 切换主题
    ToggleColor() {
      this.isWhite = !this.isWhite;
    },
    // 退出登录
    logout() {
      // 通过编程式导航返回到上一页
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出登录成功!",
          });
          this.$router.push({ name: "Sys-Login" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style lang='scss' scoped>
/* 日间主题 */
.theme-day {
  .el-header {
    color: #333;
    background-color: #fff;
    border-bottom: 0; /* 默认无边框 */
    transition: border-bottom 0.3s ease; /* 平滑过渡效果 */
    border-bottom: 1px solid #d2d3d5;
  }
  .el-main {
    background-color: #fff;
    ::v-deep tr,
    ::v-deep .el-table th,
    ::v-deep .el-table__empty-block {
      color: #333;
    }
  }
  .system-title {
    color: #4c4c4c;
  }
  .el-aside {
    .el-menu-vertical-demo,
    .el-menu-item,
    .is-opened,
    .el-submenu /deep/ .el-submenu__title,
    .el-menu-item-group /deep/ .el-menu-item-group__title {
      color: #333;
      background-color: #fff;
    }
  }
}
/* 夜间主题 */
.theme-night {
  // 通过深度选择器设置夜间模式背景  Vue 2语法，::v-deep，它是 /deep/的别名；Vue 3语法，使用:deep() 替代
  //修改el-table 组件中的表格行 (tr) 在鼠标悬停 (:hover) 时的为单元格 (td) 设置背景色
  ::v-deep .el-table__body tr:hover > td {
    background-color: #f6f7f90d; /* 设置鼠标悬停时的背景色 */
  }

  :deep(.all-night-layout),
  :deep(.box-card) {
    background-color: #2f333d; //#f6f7f90d
    border: none;
  }

  // 深度选择器设置个人中心页夜间模式
  :deep(.personal-night) {
    background-color: #2f333d;
    color: #fff;
  }
  // 深度选择器设置首页夜间模式(小模块字体颜色)
  ::v-deep .el-card-body-title,
  ::v-deep .timeline-item {
    color: #787878;
  }

  // 深度选择器设置首页夜间模式
  ::v-deep .bg-purple {
    background: #2f333d;
    border: 1px solid #dcdfe6;
  }

  // 深度选择器设置个人中心页夜间模式下，信息修改模块字体颜色
  :deep(.el-tabs__item) {
    color: #fff;
  }
  // 深度选择器设置数据统计页夜间模式
  ::v-deep .bg-echart {
    background-color: #2f333d;
    color: #fff;
  }

  .el-header {
    color: #fff;
    background-color: #23272f;
    border-bottom: 1px solid #d2d3d5;
    /deep/.el-dropdown-link {
      color: #fff;
    }
  }
  .el-main {
    color: #fff;
    background-color: #23272f;
    :deep(.el-pager li),
    :deep(.btn-prev),
    :deep(.btn-next),
    :deep(tr),
    :deep(textarea),
    :deep(.el-table th),
    :deep(.el-table__empty-block) {
      color: #fff;
      background-color: #343a46;
    }
  }
  .system-title {
    color: #fff;
  }
  .el-aside {
    .el-menu-vertical-demo,
    .el-menu-item,
    .is-opened,
    .el-submenu /deep/ .el-submenu__title,
    .el-menu-item-group /deep/ .el-menu-item-group__title {
      color: #ffffff;
      background-color: #23272f;
    }
  }
  .el-main {
    /deep/.el-button--primary,
    /deep/.el-input__inner {
      background-color: #343a46;
      border: 1px solid #dcdfe6;
    }
  }
}
.el-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  align-items: center;
}
/* 侧边栏展开折叠按钮 */
.side-open,
.side-close {
  color: #4c4c4c;
  font-size: 18px;
}
/* 系统标题 */
.system-title {
  font-size: 22px;
  margin-left: 1rem;
}
// 更换主题按钮
.theme-switch {
  left: 10px;
  margin: 21px 10px;
}
/* 消息提示按钮 */
.head-news {
  color: #4c4c4c;
  font-size: 23px;
}
// 用户头像，名称板块
.head-user {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
// 头像边框
.el-avatar {
  border: 1px solid #dcdfe6;
}
.head-msg {
  margin-right: 1.2rem;
}
// 小红点位置
/deep/ .el-badge__content.is-fixed {
  position: absolute;
  top: 6px;
}
// 下拉菜单样式
.el-dropdown-link {
  margin-left: 10px;
  cursor: pointer;
  color: #333;
}
.el-aside {
  display: block;
  color: #333;
  text-align: center;
  line-height: 200px;
}
/* side图标，文字对齐 */
.el-menu-item,
.el-submenu {
  text-align: left;
  margin-left: 3px;
}

.el-main {
  overflow-y: scroll;
  color: #333;
  text-align: center;
  padding: 0 20px;
}
/* side展开后的宽度 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: cals(100vh - 60px);
}
// 侧边栏二级菜单偏移清零
.el-menu-item[data-v-35dc9a9a],
.el-submenu[data-v-35dc9a9a] {
  margin-left: 0;
}
</style>